/* CSS Document */
/*作业一*/
.wrapper{ width:100%; height:100%; overflow:hidden; }
.center{ width:850px; height:578px; margin-top:20px; margin-left:auto; margin-right:auto; margin-bottom:auto;background:#fafafa; position:relative; z-index:1;}
.top_top{ width:100%; height:36px; background:#e9e9ea}
#ss{ width:220px; height:auto; margin-left:2%}
#ss li{ float:left; width:100px; height:36px;}
#ss li a{ width:100px; display:block; height:34px; line-height:34px; text-align:center; color:#666666; font-size:12px;}
#ss li a:hover{ border-bottom:2px solid #049dd7; color:#049dd7}
#ss li:nth-child(1) a{ background:#e9e9ea url(../images/web00_03.gif) 6% center no-repeat; background-size:18px}
#ss li:nth-child(1){ margin-left:5%}
#ss li:nth-child(2) a{ background:#e9e9ea url(../images/web01_05.gif) 8% center no-repeat; background-size:18px}
#sq{ width:100%; height:auto; overflow:hidden}
#sq li{ width:100%; height:auto; display:none}
#sq li:nth-child(2){ width:100%; height:auto; overflow:hidden}
.sq_r{ width:100%; height:40px; position:relative}
.sq_r a{ display:block; height:18px; width:174px; position:absolute; right:30px; top:10px;}
.sq_r a>#input_a{ border:1px solid #CCCCCC;border-radius:20px; width:172px; height:18px;font-size:12px; line-height:18px;color:#CCCCCC; text-indent:0.6em; background:#fafafa url(../images/web020_10.gif) 90% center no-repeat; outline:0}
.sq_c{ width:790px; height:82px; margin:0px 30px; background:#FFFFFF}
.tp{ width:137px; height:78px; float:left; margin-top:2px; margin-left:2px}
.tp img{ width:137px; height:78px}
.wz{ width:347px; height:60px; float:left; margin-top:11px; margin-left:2px}
.wz h2{ height:30px; line-height:30px; color:#666666; font-size:18px}
.wz p{ height:30px; line-height:30px; color:#CCCCCC; font-size:12px;}
.sq_sq{ width:300px; height:32px; float:right; margin-top:26px;}
.sq_sq a{ width:78px; height:30px; line-height:30px; border:1px solid #049dd7; text-align:center; display:block; float:left; margin:0px 3px; color:#049dd7}

.sq_sq a:nth-child(1){ margin-left:20px; display:block; margin-right:5px; float:left;}
.sq_sq a:nth-child(3){ margin-right:20px; display:block; margin-left:5px; float:left;}
.sq_sq a:nth-child(2){ margin-left:5px; margin-right:5px; display:block;float:left;}

.foot{ width:100%; height:auto; overflow:hidden; margin-top:360px;}
.foot_foot{ width:100px; height:20px; margin:0px auto}
.foot_foot_p{ background:#fafafa url(../images/web02_14.gif) center no-repeat; float:left; width:20px; height:20px;}
.aa{ width:58px; height:18px; line-height:18px; text-align:center; border:1px solid #CCCCCC; float:left;font-size:12px}
.foot_foot_p_p{ background:#fafafa url(../images/web02_16.gif) center no-repeat; float:left; width:20px; height:20px;float:left }
/*工作界面*/
.top_jm{ width:100%; overflow:hidden; background: #E9E9EA; height: 38px;}
.top_jm_r{ width:100px; height:38px; float:left; }
.top_jm_r a{ width:100px; height:38px;
    line-height:38px; background: url(../images/web_jm_14.png) 16% center no-repeat;  display:inline-block;
    font-size: 14px;color: #999;padding-left: 29px;}
.gb{ float:right; width:100px; height:30px;}
.gb a{ background:url(../images/web-jm_16.gif) 90% center no-repeat; width:100px; height:30px;display:inline-block;}
#ul{ width:203px; height:auto; overflow:hidden; float:left}
#ul li{ width:183px; height:165px}
#ul li a{ width:183px; height:135px; background:#fafafa url(../images/web_jm_03.gif) center no-repeat; display:block}
.input{ width:183px; height:30px;}
.input>p{ width:50%; height:30px; line-height:30px; text-align:center; display:block; float:left; font-weight:bold}


#sr{ width:597px; height:auto; overflow:hidden; float:left; margin-top:10px}
#sr li{ width:597px; height:auto; overflow:hidden; display:none;}
.li_top{ width:597px; height:30px; background:#049dd5; text-indent:2em; color:#FFFFFF; font-size:12px; font-weight:bold; line-height:30px}
.li_top_bt{ width:597px; height:50px; background:#FFFFFF; margin:10px 0px}
.li_top_bt h2{ display:block; width:90px; height:50px; line-height:50px; font-weight:bold; font-size:16px; float:left; text-indent:1.5em}
a.input_input{ display:inline-block; width:387px; height:28px; float:left; line-height:28px; text-align:center}
.li_top_bt p{ width:377px; height:50px; line-height:50px; color:#CCCCCC; display:block; float:left; margin:0px 15px}
#input,#input_input{ width:100px; height:50px; float:right}
#input>a,#input_input>a{ width:50%; height:50px; line-height:50px; text-align:center; color:#CCCCCC; display:block; float:left; font-weight:bold; font-size:16px}
.li_top_zw,.li_top_tp,.li_top_tb{ width:597px; height:100px; background:#FFFFFF; margin:10px 0px}
.li_top_zw h2{ display:block; width:90px; height:50px; line-height:50px; font-weight:bold; font-size:16px; float:left; text-indent:1.5em}
.li_top_zw>p{width:477px; height:50px; line-height:50px; color:#CCCCCC; display:block; float:left; margin:0px 15px}
.li_top_tp>p{ display:block; width:377px; height:100px; line-height:100px; float:left;}
.li_top_tp>p a{ display:inline-block; width:76px; height:76px; margin-left:60px; margin-top:12px}
.li_top_tp h2,.li_top_tb h2{ display:block; width:90px; height:50px; line-height:50px; font-weight:bold; font-size:16px; float:left; text-indent:1.5em}
#input_input{ margin-top:50px;}
.li_top_tb p{ display:block; width:397px; height:100px; line-height:100px; float:left;}
.li_top_tb>p a{ display:inline-block; width:76px; height:76px; margin-left:60px; margin-top:12px}



.sc{ width:100px; height:30px; margin:0px auto; margin-top:20px}
.sc a{ display:block; width:100px; height:30px; line-height:30px; text-align:center; color:#FFFFFF; font-size:16px; font-weight:bold; background:#049dd5}


.scroll{width:11px;height:518px;float:left;background: url(../images/scroll02.png);position:relative; background-size:11px 518px}
.scroll p{width:11px;height:61px;background: url(../images/scroll01.png);cursor:auto;left:0;top:1px;position:absolute;}

#ul li{ margin-left:10px}
#ul li img{width:183px;height:135px;}
.bd{width:230px;height:518px; margin-top:10px; float:left}
.top{height:518px;width:203px;overflow:hidden;float:left;}
#ul{width:203px; overflow:hidden;}


.li_top_bt,.li_top_zw,.li_top_tp,.li_top_tb{ -webkit-box-shadow:1px 1px 1px 1px #CCCCCC}

/*选择类型*/
.scroll_scroll{width:1px;height:518px;float:left; background:#999999}
#ul_ul{ width:204px; height:auto; overflow:hidden; float:left; margin-top:10px}
#ul_ul li{ width:194px; height:146px; margin-left:5px; margin-bottom:40px;}
#ul_ul li>img{ width:194px; height:146px; }
#sw{ width:580px; height:528px; float:left; overflow:hidden}
#sw li{ width:580px; height:518px; display:none; margin:0px 10px; margin-top:15px}
.hp_hp{ width:580px; height:50px; background:#FFFFFF; margin-bottom:10px}
.hp_hp h2,.hp_hp_hp h2,.hp_hp_hp_hp h2{ height:50px; line-height:50px; font-size:16px; text-align:center; display:inline-block; margin:0px 15px}
.hp_hp p{ height:50px; line-height:50px; font-size:16px; display:inline-block; color:#CCCCCC}
.hp_hp_hp span,.hp_hp_hp_hp span{ color:#CCCCCC; font-size:16px; display:inline-block}

.hp_hp_hp,.hp_hp_hp_hp{ width:280px; height:50px; float:left; background:#FFFFFF; margin:10px 0px}
.hp_hp_hp{ margin-left:10px}
.hp_hp_hp_hp{ margin-right:10px}
.qsr_qsr,.qsr_qsr_1,.qsr_qsr_2,.qsr_qsr_3,.qsr_qsr_4,.qsr_qsr_5{ width:95px; height:50px; float:left; background:#FFFFFF; line-height:50px; text-align:center}
.qsr_qsr{ margin-right:1px}
.qsr_qsr_1,.qsr_qsr_2,.qsr_qsr_3,.qsr_qsr_4{ margin:0px 1px}
.qsr_qsr_5{ margin-left:1px}
.qsr_qsr_qsr{ width:580px; height:50px; margin:10px 0px; overflow:hidden}
.qsr_qsr h2,.qsr_qsr p{ height:25px; line-height:25px; text-align:center; font-size:16px; color:#CCCCCC}
.qsr_qsr p{ line-height:20px}

.db,.db_db{ width:100px; height:30px; color:#FFFFFF; font-size:16px; background:#049dd5; float:left; text-align:center; line-height:30px; margin-top:50px}
.db_db{ margin-left:180px; margin-right:10px}
.db{ margin-right:180px; margin-left:10px}
.db a{ display:block; width:100px; height:30px; color:#FFFFFF; line-height:30px; text-align:center; font-size:16px}
.db_db a{ display:inline-block; height:30px; line-height:30px; font-size:16px; color:#FFFFFF}

.qsr_qsr span{ height:50px; font-size:16px; line-height:50px; text-align:center; display:inline-block}
.db_db_db{ width:100%; height:30px; margin-top:200px}
.db_jl{ width:100%; height:30px; margin-top:70px}

/*作品预览*/
/*.zpyl{ width:100%; height:30px; line-height:30px; font-size:16px; color:#FFFFFF; background:#049dd5; text-indent:2.0em}*/
.xm{ width:100%; height:30px; margin:0px auto; margin-top:10px}
.xm a{ width:100px; height:30px; line-height:30px; display:inline-block; background:#049dd5; color:#FFFFFF; text-align:center; float:left}
.xm a:nth-child(1){ margin-left:175px; margin-right:50px}
.xm a:nth-child(3){ margin-right:175px; margin-left:50px}
.xm a:nth-child(2){ margin:0px 50px}
#zz{ position:absolute; left:0px; top:0px; width:850px; height:578px;  background:rgba(0,0,0,0.7); z-index:999}
/*链接2*/
#zzc{ position:absolute; left:0px; top:0px; width:850px; height:578px;  background:rgba(0,0,0,0.7); z-index:999}
.zx{ position:absolute; bottom:80px; left:320px; width:200px; height:30px; margin:0px auto;}
.zx a{ display:inline-block; width:80px; height:30px; line-height:30px; color:#049dd5; font-size:16px}
.zx p{ display:inline-block; width:120px; height:30px; line-height:30px; color:#049dd5; font-size:16px; color:#FFFFFF; background:#e3653c; text-align:center;}
.sfxjt{ width:16px; height:16px; color:#049dd5; position:absolute; left:300px; bottom:90px}
#xxx{ position:absolute; right:140px; top:45px; width:18px; height:18px; color:#FFFFFF; }
#xxx a{ border:none; width:16px; height:16px; background:none; text-align:center; color:#FFFFFF; font-size:16px; line-height:16px}
/*选择模板*/
.top_top_to{ width:100%; height:36px; background:#e9e9ea}
#tab{ width:220px; height:auto; margin-left:30px; overflow:hidden}
#tab li{ float:left; width:78px; height:34px;}
#tab li a{ display:block; width:78px; height:34px; line-height:34px}
#tab li:nth-child(2){ margin-left:15px}
#tab li i{ width:18px; display:inline-block; height:20px; text-align:center; display:inline-block; margin-top:7px; float:left}
#tab li a>p.pp{ display:inline-block;height:36px; width:58px;line-height:36px;color:#666666; font-size:12px; float:left; text-indent:0.6em}
#tab li:hover{ border-bottom:2px solid #049dd7; }
#tab li a p.pp:hover{color:#049dd7}
#tab li a i>img{ width:18px; height:20px;}
 





